<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
%>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="naver-site-verification"
	content="90b0d706fa56cb9c5914b512616189b76aad1db5" />
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1">
<title>대출이자 계산기</title>
<link rel="stylesheet" type="text/css"
	href="http://loan.ooi.kr/css/bootstrap.min.css">
<link rel="stylesheet"	href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<!-- <link rel="stylesheet" href="http://loan.ooi.kr/css/common.css"> -->

<!--[if lte IE 8]>
<script src="http://loan.ooi.kr/js/html5.js"></script>
<![endif]-->
<script>
	// 자바스크립트에서 사용하는 전역변수 선언
	var g5_url = "http://loan.ooi.kr";
	var g5_bbs_url = "http://loan.ooi.kr/bbs";
	var g5_is_member = "";
	var g5_is_admin = "";
	var g5_bo_table = "";
	var g5_sca = "";
	var g5_editor = "";
	var g5_cookie_domain = "";
</script>
<link>
<script src="http://loan.ooi.kr/js/jquery-1.8.3.min.js"></script>
<script
	src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script
	src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://loan.ooi.kr/js/jquery.ui.touch-punch.min.js"></script>
<script src="http://loan.ooi.kr/js/cal.js"></script>
<script src="http://loan.ooi.kr/js/common.js"></script>
<script src="http://loan.ooi.kr/js/wrest.js"></script>
<script src="calcuator.js"></script>
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script>
	(function(i, s, o, g, r, a, m) {
		i['GoogleAnalyticsObject'] = r;
		i[r] = i[r] || function() {
			(i[r].q = i[r].q || []).push(arguments)
		}, i[r].l = 1 * new Date();
		a = s.createElement(o), m = s.getElementsByTagName(o)[0];
		a.async = 1;
		a.src = g;
		m.parentNode.insertBefore(a, m)
	})(window, document, 'script', '//www.google-analytics.com/analytics.js',
			'ga');
	ga('create', 'UA-52509530-1', 'auto');
	ga('send', 'pageview');
</script>

</head>
<body>
	<div class="container" style="width: 1000px;">
		<div class="row">
			<script async
				src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- LOAN_ooi -->
			<ins class="adsbygoogle"
				style="display: inline-block; width: 728px; height: 90px"
				data-ad-client="ca-pub-7384972221859329" data-ad-slot="5226501492"></ins>
			<script>
				(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>

		<div class="row">
			<div class="panel panel-default" style="width: 1000px;">
				<div class="panel-heading">
					<h4>상환방법</h4>
				</div>
				<div class="panel-body">
					<div class="col-md-4">
						<div class="radio">
							<label><input type="radio" name="ch" id="op1" value="0"
								onclick="setCheck();" checked>원리금균등상환</label>
						</div>
					</div>
					<div class="col-md-4">
						<div class="radio">
							<label><input type="radio" name="ch" id="op2" value="1"
								onclick="setCheck();">원금균등상환</label>
						</div>
					</div>
					<div class="col-md-4">
						<div class="radio">
							<label><input type="radio" name="ch" id="op3" value="2"
								onclick="setCheck();">원금만기일시상환</label>
						</div>
					</div>
				</div>
			</div>
			<div class="alert alert-warning" style="width: 1000px;">
				<p id="ss1" style="display: block;">
					<strong>원리금균등상환</strong> 대출융자금 원금과 이자를 매달 같은 금액으로 갚는 방식으로 이자는
					고정이자율입니다.
				</p>
				<p id="ss2" style="display: none;">
					<strong>원금균등상환</strong> 원금 상환금은 일정하지만 이자는 시간에 따라 적어지게 되는 방식입니다.
				</p>
				<p id="ss3" style="display: none;">
					<strong>원금만기일시상환</strong> 약정기간동안 이자만 갚아가는 방식으로 만기시 대출금 모두를 상환합니다.
				</p>
			</div>
		</div>
		<div class="row">
			<div class="panel panel-default" style="width: 1000px;">
				<div class="panel-heading">
					<label for="amount" class="control-label"><h4>대출금액</h4></label>
					<div class="clearfix pull-right">
						<input type="text" id="a1" 	class="form-control">
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="panel-body">
					<p class="btn-div">
						<button type="button" class="btn btn-primary btn-sm"
							value="1000000" onclick="appendMn(this,'a1','slider')">100만원</button>
						<button type="button" class="btn btn-primary btn-sm"
							value="5000000" onclick="appendMn(this,'a1','slider')">500만원</button>
						<button type="button" class="btn btn-primary btn-sm"
							value="10000000" onclick="appendMn(this,'a1','slider')">1000만원</button>
						<button type="button" class="btn btn-primary btn-sm"
							value="50000000" onclick="appendMn(this,'a1','slider')">5000만원</button>
						<button type="button" class="btn btn-primary btn-sm"
							value="100000000" onclick="appendMn(this,'a1','slider')">1억만원</button>
						<button type="button" class="btn btn-primary btn-sm" value="0"
							onclick="appendMn(this,'a1','slider')">리셋</button>
					</p>
					<p>
					<div id="slider"></div>
					</p>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="panel panel-default" style="width: 1000px;">
				<div class="panel-heading">
					<label for="amount" class="control-label"><h4>대출기간</h4></label>
					<div class="clearfix pull-right">
						<input type="text" id="a2" class="form-control">
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="panel-body">
					<button type="button" class="btn btn-primary btn-sm" value="6"
						onclick="appendDate(this,'a2','slider2')">6개월</button>
					<button type="button" class="btn btn-primary btn-sm" value="12"
						onclick="appendDate(this,'a2','slider2')">1년</button>
					<button type="button" class="btn btn-primary btn-sm" value="36"
						onclick="appendDate(this,'a2','slider2')">3년</button>
					<button type="button" class="btn btn-primary btn-sm" value="60"
						onclick="appendDate(this,'a2','slider2')">5년</button>
					<button type="button" class="btn btn-primary btn-sm" value="120"
						onclick="appendDate(this,'a2','slider2')">10년</button>
					<button type="button" class="btn btn-primary btn-sm" value="0"
						onclick="appendDate(this,'a2','slider2')">리셋</button>
					<p>
					<div id="slider2"></div>
					</p>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="panel panel-default" style="width: 1000px;">
				<div class="panel-heading">
					<label for="amount" class="control-label"><h4>대출금리</h4></label>
					<div class="clearfix pull-right">
						<input type="text" id="a3" class="form-control">
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="panel-body">
					<div id="slider3"></div>
				</div>
			</div>
		</div>
		<p class="text-center" style="width: 1000px;">
			<button type="button" class="btn btn-primary" onclick="doCalc();">계산하기</button>
			<button type="button" class="btn btn-default" onclick="reset();">초기화</button>
		</p>
		<div class="calculatorResult" style="width: 1000px;">
			<p class="txtResult"></p>
			<div class="table-responsive">
				<table class="table" id="table1"
					summary="이 표는 대출금 상환금액과 일정 계산 결과를 나타내며, 대출금액, 대출기간, 대출금리, 상환주기, 상환방법, 상환금, 총이자 항목으로 구성되어 있습니다.">
					<caption></caption>
					<thead>
						<tr>
							<th scope="col">대출금액</th>
							<th scope="col">대출기간</th>
							<th scope="col">대출금리</th>
							<th scope="col">상환주기</th>
							<th scope="col">상환방법</th>
							<th scope="col">상환금</th>
							<th scope="col" class="nbr">총이자</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td class="tRight"></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td class="tRight"></td>
							<td class="tRight nbr"></td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="table-responsive">
				<form action="schedule_insert.jsp" method="post">
					<table class="table table-hover text-right" id="table2"
						summary="이 표는 대출금 상환금액과 일정 계산 결과를 나타내며, 회차, 상환일, 상환금, 납입원금, 이자, 납입원금합계, 잔금 항목으로 구성되어 있습니다.">
						<caption></caption>
						<thead>
							<tr>
								<th>회차</th>
								<th scope="col">상환금</th>
								<th scope="col">납입원금</th>
								<th scope="col">이자</th>
								<th scope="col">납입원금 합계</th>
								<th scope="col" class="nbr">잔금</th>
							</tr>
						</thead>
						<tbody id="tbody">
							<tr id="trbody">
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td class="nbr"></td>
							</tr>
						</tbody>
					</table>
					<div id="div1" STYLE="display: none;"></div>
				
				</form>
				<br>
			</div>
		</div>
	</div>




	<!-- } 콘텐츠 끝 -->


	<script>
		$(function() {
			// 폰트 리사이즈 쿠키있으면 실행
			font_resize("container", get_cookie("ck_font_resize_rmv_class"),
					get_cookie("ck_font_resize_add_class"));
		});
	</script>

	<!-- ie6,7에서 사이드뷰가 게시판 목록에서 아래 사이드뷰에 가려지는 현상 수정 -->
	<!--[if lte IE 7]>
<script>
$(function() {
    var $sv_use = $(".sv_use");
    var count = $sv_use.length;

    $sv_use.each(function() {
        $(this).css("z-index", count);
        $(this).css("position", "relative");
        count = count - 1;
    });
});
</script>
<![endif]-->
</body>
</html>
